<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>生成活动海报</title>

  <style>
    html {
      font-size: 50px;
      /* (base/uiWidth)*100vw = (100/750)*100vw，之后使用rem单位时：设计稿100px -> 1rem，32px -> 0.32rem。这里设计稿总宽度为750px */
      font-size: 13.33vw;
      -webkit-text-size-adjust: 100%;
    }
    * {
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
    }
    body, p, h1, h2, h3, h4, h5, h6, ul, li {
      margin: 0;
      padding: 0;
    }
    body {
      max-width: 640px;
      margin: 0 auto !important;
      font-size: 14px;
      line-height: 1.15;
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      background: #e84c36 url('./img/bg.png') no-repeat center;
      background-size: 100% auto;
    }

    @media (max-width: 320px) {
      html {
        font-size: 42px;
        /* font-size: 41px; */
      }
    }
    @media (min-width: 640px) {
      html {
        font-size: 85px;
      }
    }

    .flex-row {
      display: -webkit-flex;
      display: flex;
    }
    .justify-content-sb {
      -webkit-justify-content: space-between;
      justify-content: space-between;
    }
    .align-items-center {
      -webkit-box-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

    #toastBox {
      position: fixed;
      z-index: 999;
      left: 50%;
      top: -80%;
      max-width: 80%;
      padding: .2rem .3rem;
      font-size: .28rem;
      line-height: 1.4;
      text-align: center;
      color: #222;
      word-break: break-all;
      background-color: #fff;
      border-radius: .16rem;
      box-shadow: 0 0 10px rgba(0, 0, 0, .1);
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      transition: top .2s;
      -webkit-transition: top .3s;
    }
    #toastBox.show {
      top: 5%;
    }

    .poster-top {
      margin: .24rem .16rem;
      padding: .34rem .44rem;
      background-color: #fefce5;
      border-radius: .32rem;
    }
    .poster-top-header {
      line-height: .5rem;
      margin-bottom: .2rem;
    }
    .poster-top-header img {
      width: .34rem;
      height: .34rem;
      vertical-align: middle;
    }
    .poster-top-title {
      vertical-align: middle;
      font-size: .32rem;
      font-weight: 600;
      color: #8a4526;
      position: relative;
    }
    .poster-top-title::after {
      content: '';
      width: 90%;
      height: .16rem;
      background-color: #f4ecd6;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    .poster-top-title span {
      position: relative;
      z-index: 1;
    }
    .copywriting-btn {
      background: transparent;
      border: 0;
      font-size: .28rem;
      color: #d56428;
    }
    .copywriting-text {
      font-size: .28rem;
      color: #8a4526;
    }
    .poster-tips {
      color: #fff;
      font-size: .28rem;
      line-height: 1.5;
      text-align: center;
      margin: .28rem auto;
    }
    .poster-tips p {
      display: inline-block;
      position: relative;
    }
    .poster-tips span::after {
      content: '';
      width: 100%;
      height: .26rem;
      padding: 0 10px;
      background: linear-gradient(to bottom, transparent, rgb(255 180 164 / 48%));
      background: -webkit-linear-gradient(to bottom, transparent, #e9755c);
      position: absolute;
      bottom: 0;
      left: -10px;
      border-radius: .14rem;
    }
    .poster-tips p:last-child::after {
      width: 104%;
      left: -2%;
    }
    .poster-tips p span {
      position: relative;
      z-index: 1;
    }
    .poster-wrap {
      width: 6.34rem;
      /* height: 10.92rem; */
      padding: .24rem;
      margin: .28rem auto 1.94rem;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      border-radius: .32rem;
      border: 2px solid #fff;
      background-color: #fae2b6;
      box-shadow: 0 0 10px #e1c58e inset;
      overflow: hidden;
    }
    .poster-box {
      width: 100%;
      border-radius: .32rem;
      overflow: hidden;
    }
    .poster-box img {
      width: 100%;
    }
    .poster-bottom {
      text-align: center;
      width: 100%;
      height: 1.7rem;
      position: fixed;
      bottom: 0;
      left: 0;
      background-color: #e84c36;
      box-shadow: 0 -3px 5px rgba(0, 0, 0, .1);
    }
    .poster-bottom .bottom-btn {
      text-decoration: none;
      color: #ed723c;
      font-size: .32rem;
      font-weight: 600;
      display: block;
      height: .8rem;
      line-height: .8rem;
      margin: .2rem .36rem;
      background: #f9edd3;
      border: 2px solid #ffcbc1;
      border-radius: .4rem;
    }
    .poster-bottom p {
      line-height: .4rem;
      color: #fe8378;
      font-size: .24rem;
    }
    .poster-bottom p img {
      height: .3rem;
      vertical-align: middle;
    }
    .poster-bottom p span {
      vertical-align: middle;
    }
  </style>
</head>
<body>
  <!-- 448*798 -->
  <!-- 586*1044 -->
  <div id="app">
    <section class="poster-top">
      <div class="flex-row justify-content-sb align-items-center poster-top-header">
        <div>
          <!-- <img src="/fission/img/icon-doc.png" alt=""> -->
          <span class="poster-top-title"><span>推荐转发文案：</span></span>
        </div>
		{if $fission->forward_set}
        <button data-clipboard-text="{$fission->forward_text}" class="copywriting-btn">复制</button>
		{/if}
      </div>
      <p class="copywriting-text">{$fission->forward_text}</p>
    </section>

    <div class="poster-tips">
      <p style="display: block;"><span>长按保存专属海报分享给好友</span></p>
      <p style="display: block;"><span>好友扫码添加微信后即助力成功</span></p>
    </div>

    <section class="poster-wrap poster-wrap-h">
      <div class="poster-box">
        {if $fuser->type == 1}
        <img src="createPoster-{$fuser->id}-1.html" alt="海报">
        {else}
        <img src="createPoster-{$fuser->id}-2.html" alt="海报">
        {/if}
 
      </div>
    </section>

    <section class="poster-bottom">
      <a class="bottom-btn" href="help_progress-{$fuser->id}.html">查看助力进度</a>

    </section>

  </div>

  <div id="toastBox" class="">
    <span id="toastText">复制成功</span>
  </div>

  <script src="/fission/js/clipboard.min.js"></script>
  <script type="text/javascript">
      window.onload=function(){
      //drawAndShareImage();
    }
      function drawAndShareImage(){
        var canvas = document.createElement("canvas");
        canvas.width = 288;
        canvas.height = 288;
        var context = canvas.getContext("2d");
        context.rect(0 , 0 , canvas.width , canvas.height);
        context.fillStyle = "#fff";
        context.fill();
        var myImage = new Image();
        myImage.src = "https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=251289958,1860898046&fm=26&gp=0.jpg";  //背景图片 你自己本地的图片或者在线图片
        myImage.crossOrigin = 'Anonymous';
        myImage.onload = function(){
          context.drawImage(myImage , 0 , 0 , 288 , 288);
          context.font = "15px Courier New";
          context.fillText("微信名称",80,50);
          var myImage2 = new Image();
          myImage2.src = "https://wework.qpic.cn/wwpic/488480_Y9XiEPqqS6SIQiI_1596811997/0";  //你自己本地的图片或者在线图片
          myImage2.crossOrigin = 'Anonymous';
          myImage2.onload = function(){
            context.drawImage(myImage2 , 175 , 175 , 100 , 100);
          var myImage3 = new Image();
          myImage3.src = "https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3452544685,1844225866&fm=26&gp=0.jpg";  //你自己本地的图片或者在线图片
          myImage3.crossOrigin = 'Anonymous';
          myImage3.onload = function(){
              context.drawImage(myImage3 , 20 , 20 , 50 , 50);
      
                var base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下
                var img = document.getElementById('avatar');
                // document.getElementById('avatar').src = base64;
                $('#avatar').attr('src', base64);
          //       img.setAttribute('src' , base64);
            }
      //       var base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下
      //       var img = document.getElementById('avatar');
      //       // document.getElementById('avatar').src = base64;
      //       img.setAttribute('src' , base64);
          }
        }
      }
  </script>
  <script>
    var clip = new ClipboardJS('.copywriting-btn');
    clip.on('success', function() {
      showToast('复制成功')
    });
    clip.on('error', function() {
      showToast('请手动长按下方文案复制～')
    });

    var toastTimer;
    function showToast(text, duration) {
      var el = document.getElementById('toastBox');
      if (toastTimer) {
        clearTimeout(toastTimer);
        toastTimer = null;
        el.style.display = 'none';
        el.classList.remove('show');
        el.style.display = 'block';
      }

      setTimeout(function() {
        document.getElementById('toastText').innerText = text;
        el.classList.add('show');
        toastTimer = setTimeout(hideToast, duration || 2000)
      }, 50)
    }
    function hideToast() {
      toastTimer = null;
      document.getElementById('toastBox').classList.remove('show');
    }
  </script>
</body>
</html>